<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2022-05-31 08:24:47
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-02-13 10:44:11
-->
<template>
  <div class="login-view-flex">
    <div class="main-content-box" :style="'min-height:' + clientHeight + 'px;'">
      <div class="img-box">
        <van-image :src="bgImg"></van-image>
      </div>
      <div class="login-title-box">
        欢迎登录<br />
        宏联课堂点名系统
      </div>
      <van-row class="login-row-box">
        <van-col :span="24" class="login-col-box">
          登录账户
          <van-field
            v-model="loginForm.userName"
            clearable
            @blur="userNameBlur"
            :error="userNameError"
            required
            label=""
            placeholder="请输入登录账户"
          />
        </van-col>
        <van-col :span="24" class="login-col-box">
          账户密码
          <van-field
            v-model="loginForm.password"
            clearable
            :type="showPwd ? 'text' : 'password'"
            @blur="passwordBlur"
            label=""
            :right-icon="showPwd ? 'eye' : 'closed-eye'"
            @click-right-icon="clickRightIcon"
            :error="passwordError"
            required
            placeholder="请输入账户密码"
          />
        </van-col>
      </van-row>
      <!-- btn -->
      <div class="fixed-btn-box">
        <Button
          type="primary"
          round
          block
          :disabled="loginForm.password == '' || loginForm.userName == ''"
          color="#3d7fff"
          @click="sumbit"
          style="font-size: 17px"
          >登 录</Button
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Toast } from "vant";
import { reactive, ref, onMounted, onUnmounted, toRefs } from "vue";
import { Md5 } from "ts-md5/dist/md5";
// import JSBase64 from 'js-base64'
import $util from "../util/util";
import bgImg from "../assets/images/bg@2x.png";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { Params, getLogin } from "../components/Options/LoginQues";
import Base64 from "../util/Base64";
// const Base64 = JSBase64.Base64
const store = useStore();
const router = useRouter();
const wechatQuery = ref<any>({ code: "", type: "" });
const loginForm = reactive<any>({ userName: "", password: "" });
const showLoading = ref(true);
const showPwd = ref(false);
const ddLoginForm = ref({});
const userNameError = ref(false);
const passwordError = ref(false);
const clientHeight = window.innerHeight - 97;
// 登录账户失焦事件
const userNameBlur = (val: any) => {
  if (loginForm.userName === undefined || loginForm.userName.trim() === "") {
    userNameError.value = true;
  } else {
    userNameError.value = false;
  }
};
const clickRightIcon = () => {
  showPwd.value = !showPwd.value;
};
// 登录密码失焦事件
const passwordBlur = (e: any) => {
  if (!loginForm.password) {
    passwordError.value = true;
  } else {
    passwordError.value = false;
  }
};
// 点击登录
const sumbit = async () => {
  const base64 = new Base64();
  const result = base64.encode(loginForm.userName);
  const params: Params = {
    captch_key: 49278,
    code: "",
    openid: "",
    passwd: Md5.hashStr(loginForm.password),
    username: result,
  };
  // console.log(params)
  const res: any = await getLogin(params);
  if (res.code !== 1) {
    return Toast(res.msg);
  }
  // console.log(res.msg)
  window.sessionStorage.setItem("accessToken", res.data.accessToken);
  window.sessionStorage.setItem("loginForm", JSON.stringify(res.data));
  store.dispatch("setLoginForm", res.data);
  router.replace({ path: "/index", query: { isLogin: 1 } });
};
onMounted(() => {
  if (window.sessionStorage.getItem("loginForm")) {
    store.dispatch(
      "setLoginForm",
      JSON.parse(window.sessionStorage.getItem("loginForm") as any)
    );
  }
  store.dispatch("setActive", "1");
});
onUnmounted(() => {});
</script>
<style lang="scss" scoped>
.login-view-flex {
  width: 100%;
  // padding: 15px;
  background: #fff;
  // background-image: url('../assets/images/bg@2x.png');
  // background-size: 100% 100%;
  box-sizing: border-box;
  position: relative;
  .login-title-box {
    font-family: bold;
    font-size: 24px;
    position: relative;
    z-index: 2;
    padding-left: 30px;
    padding-top: 90px;
  }
  .main-content-box {
    font-size: 18px;
    width: 100%;
    position: relative;
    .img-box {
      position: absolute;
      top: 0;
      right: 0;
      width: 80%;
    }
    .left-icon-bg {
      width: 46px;
      height: 46px;
      border-radius: 4px;
      background: #ff6b30;
      margin-right: 10px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.login-row-box {
  padding: 30px;
  .login-col-box {
    border-bottom: 1px solid #f7f7f7;
    margin-bottom: 15px;
  }
}
.fixed-btn-box {
  width: 100%;
  padding: 30px 15%;
  padding-bottom: 0;
  box-sizing: border-box;
}
</style>
<style lang="scss">
.login-view-flex {
  .van-cell {
    padding-left: 0;
    font-size: 16px;
  }
}
</style>
